<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://oss.chathot.me/action/js/loading.js?v=0.10060"></script>
    <script src="https://oss.chathot.me/action/js/vue.min.js"></script>
    <script src="https://oss.chathot.me/action/mobile_js/mobile_until.js?v=0.10060"></script>
    <!--   <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script> -->
    <link rel="stylesheet" href="https://oss.chathot.me/action/js/var.css?v=0.10060" />
    <!-- <script src="https://oss.chathot.me/action/mobile_js/mobile_request.js?v=0.234"></script> -->
    <!-- <script src="https://oss.chathot.me/action/mobile_js/mobile_https.js?v=0.234"></script> -->
    <script src="https://oss.chathot.me/action/mobile_js/svga.min.js?v=2343"></script>
    <script src="https://oss.chathot.me/action/mobile_js/Blob.min.js?v=2343"></script>
    <!-- <script src="https://oss.chathot.me/action/mobile_js/mobile_https.js?v=1"></script> -->
    <!-- <script src="./request.js?v=124"></script> -->
    <script src="./request.js?v=2"></script>
    <link rel="stylesheet" href="./css//family.css" />
    <link rel="stylesheet" href="swiper.min.css">
    <script src="swiper.min.js"></script>
    <link rel="stylesheet" href="css/cer.css">
    <!-- <script>
        function environment() {
            return false
        }
    </script> -->

</head>

<body>

    <!--   <script>
        // init vConsole
        // var vConsole = new VConsole();
    </script>     -->
    <div class="app" id="app">
        <div class="head-svga">
            <div class="rewardRules">
                <div class="left" @click="reward"></div>
                <!-- <div class="right"></div> -->
            </div>

        </div>
        <div class="rewardPop-up">
            <div class="rewardPop-head">

                <div class="rewardPop-con">
                    <div class="rewardPop-context">
                        <div class="rewardPop-text" style="padding-top: .2rem">
                            Los ataques se generarán enviando los regalos del evento. Cuanto mayor sea el número de
                            miembros de la familia, mayor será el poder de ataque. Recibirán recompensas por derrotar
                            monstruos y entrar en el Top 3 de la lista.
                        </div>
                    </div>

                </div>
            </div>
            <div class="rewardPop-inMiddle">
                <div class="inMiddle-text">
                    <div>Para apoyo familiar, comuníquese con el administrador:</div>
                    <div @click='contactStarSecretary' style="color:#fff;"> >>> Cinthya</div>
                </div>
                <div class="attack">
                    <div class="attack-b">
                        <div class="attack-c">
                            <div class="attack-img"></div>
                        </div>
                        <div class="attack-d">
                            <div class="attack-e">
                            </div>
                            <div class="attack-num">150</div>

                        </div>
                    </div>
                    <div class="attack-b">
                        <div class="attack-c">
                            <div class="attack-imgb"></div>
                        </div>
                        <div class="attack-d">
                            <div class="attack-e">
                            </div>
                            <div class="attack-num">300</div>

                        </div>
                    </div>
                    <div class="attack-b">
                        <div class="attack-c">
                            <div class="attack-imgc"></div>
                        </div>
                        <div class="attack-d">
                            <div class="attack-e">
                            </div>
                            <div class="attack-num">2000</div>

                        </div>
                    </div>
                    <div class="attack-b">
                        <div class="attack-c">
                            <div class="attack-imgd"></div>
                        </div>
                        <div class="attack-d">
                            <div class="attack-e">
                            </div>
                            <div class="attack-num">3333</div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="rewardPop-follow ">
            </div>
        </div>
        <div class="countdown">

            <!-- <div v-if="listfamily==false">
                <span>{{ countdown_d }}d</span>
                <span>{{ countdown_h }}h</span>
                <span>{{ countdown_m }}m</span>
                <span>{{ countdown_s }}s</span>
            </div> -->
            <div>
                <span>{{ time1 }}d</span>
                <span>{{ time2 }}h</span>
                <span>{{ time3 }}m</span>
                <span>{{ time6 }}s</span>
            </div>
        </div>
        <div class="aMonster">
            <ul>
                <li :class="{'active':tabT===1}" @click='changeTab(1)'>
                    Lucha contra monstruos
                </li>
                <li :class="{'active':tabT===2}" @click='changeTab(2)'>
                    Clasificación

                </li>
            </ul>
        </div>
        <div class="rewardPop-up" v-show='tabT==1'>
            <div class="rewardPop-head" style="height:2.6rem">

                <div class="rewardPop-con">
                    <div class="rewardPop-context monster-context" style="height: 2.6rem;">

                        <div class="rewardPop-text ">
                            Cuanto mayor sea el número de usuarios dentro de la familia, mayor será el poder de ataque.
                            Al finalizar el evento los miembros de la familia podrán retirar las monedas de oro de
                            acuerdo con su contribución de poder de ataque, y solo pueden recibir la recompensa 1 sola
                            vez, dependiendo el nivel alcanzado.

                        </div>

                    </div>

                </div>

            </div>
            <!-- 轮播图 -->
            <div class="monster-inMiddle-ak">

                <div id="certify" class="certify">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">

                            <div class="swiper-slide green">
                                <div class="promptInformationa" v-if="promptInformationa">
                                    <div class="promptInformation-s"></div>
                                    <div class="promptInformation-z">
                                        <span>
                                            <div>1-50 miembros: Ataque * 0.5</div>
                                            <div>50-100 Miembros: Ataque * 1</div>
                                            <div>Más de 100: ataque * 2</div>
                                        </span>
                                    </div>
                                    <div class="promptInformation-x"></div>
                                </div>
                                <div class="cardcon">
                                    <p class="cardname">
                                        Nombre del monstruo:Lia
                                    </p>
                                    <div v class="carditext">
                                        <div class="cardup">
                                            <p>Mi potenciador de ataque</p>
                                            <div class="cardupims" @click="promptInformation"><img
                                                    src="https://oss.chathot.me/action/halloweenDirectory/family/23.png"
                                                    alt=""></div>

                                        </div>
                                        <div class="cardx">

                                            <img src="https://oss.chathot.me/action/halloweenDirectory/family/Buff.png"
                                                alt="">
                                            <span>{{buffi() }}</span>
                                        </div>
                                    </div>
                                    <div class="cardpia">
                                        <img src="https://oss.chathot.me/action/halloweenDirectory/family/gs1.png" />
                                        <div class="cardpicmsgss">
                                            <p class="hb" v-if="listfamily==false">
                                                <img
                                                    src="https://oss.chathot.me/action/halloweenDirectory/family/hp.png">
                                                Monstruo HP:500000/500000
                                            </p>
                                            <p class="hb" v-else-if="nowBlood<=0">
                                                <img
                                                    src="https://oss.chathot.me/action/halloweenDirectory/family/hp.png">
                                                Monstruo HP:0/{{greenTotal}}
                                            </p>
                                            <p class="hb" v-else>
                                                <img
                                                    src="https://oss.chathot.me/action/halloweenDirectory/family/hp.png">
                                                Monstruo HP:{{ greenrankT||500000 }}/{{greenTotal}}
                                            </p>

                                            <div class="xue">
                                                <p class="mming" :style="{'width':greenWidth+ '%'} "
                                                    v-if="listfamily!==false"></p>
                                                <p class="mming" style="width:100% " v-else></p>

                                            </div>
                                        </div>
                                    </div>
                                    <a class="cardbtns" @click='changeBtn(listfamily.family_id)'>
                                        <img
                                            src="https://oss.chathot.me/action/halloweenDirectory/family/8ab98f60565081ab9c552853f18d2d1.png">
                                        <p class="cardbtnstext" style="font-size: .24rem;">Comparte 100K monedas</p>

                                    </a>
                                </div>
                            </div>

                            <div class="swiper-slide blue">
                                <div class="promptInformationa" v-if="promptInformationas">
                                    <div class="promptInformation-s"></div>
                                    <div class="promptInformation-z">
                                        <span>
                                            <div>1-50 miembros: Ataque * 0.5</div>
                                            <div>50-100 Miembros: Ataque * 1</div>
                                            <div>Más de 100: ataque * 2</div>
                                        </span>
                                    </div>
                                    <div class="promptInformation-x"></div>
                                </div>
                                <div class="cardcon">
                                    <p class="cardname">
                                        Nombre del monstruo:Lucia
                                    </p>
                                    <div class="carditext">
                                        <div class="cardup">
                                            <p>Mi potenciador de ataque</p>
                                            <div class="cardupims" @click="changeBtns"><img
                                                    src="https://oss.chathot.me/action/halloweenDirectory/family/23.png"
                                                    alt=""></div>
                                        </div>
                                        <div class="cardx">
                                            <img src="https://oss.chathot.me/action/halloweenDirectory/family/Buff.png"
                                                alt="">
                                            <span>{{buffi()}}</span>
                                        </div>
                                    </div>
                                    <div class="cardpia">
                                        <img src="https://oss.chathot.me/action/halloweenDirectory/family/gs1.png" />
                                        <div class="cardpicmsgss">
                                            <p class="hb" v-if="listfamily==false">
                                                <img
                                                    src="https://oss.chathot.me/action/halloweenDirectory/family/hp.png">
                                                Monstruo HP:1000000/1000000
                                            </p>
                                            <p class="hb" v-else-if="nowBloodb<=0">
                                                <img
                                                    src="https://oss.chathot.me/action/halloweenDirectory/family/hp.png">
                                                Monstruo HP:0/{{blueTotal}}
                                            </p>
                                            <p class="hb" v-else>
                                                <img
                                                    src="https://oss.chathot.me/action/halloweenDirectory/family/hp.png">
                                                Monstruo HP:{{ greenrankTb||1000000 }}/{{blueTotal}}
                                            </p>
                                            <div class="xue">

                                                <p class="mming" :style="{'width':blueWidthb+ '%'}"
                                                    v-if="listfamily!==false"></p>

                                                <p class="mming" style="width:100% " v-else></p>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="cardbtns" @click='changeBtn(listfamily.family_id)'>
                                        <img
                                            src="https://oss.chathot.me/action/halloweenDirectory/family/8ab98f60565081ab9c552853f18d2d1.png">
                                        <p class="cardbtnstext " style="font-size: .24rem; ">Comparte 300K monedas</p>

                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide red">
                                <div class="promptInformationa" v-if="promptInformationass">
                                    <div class="promptInformation-s"></div>
                                    <div class="promptInformation-z">
                                        <span>
                                            <div>1-50 miembros: Ataque * 0.5</div>
                                            <div>50-100 Miembros: Ataque * 1</div>
                                            <div>Más de 100: ataque * 2</div>
                                        </span>
                                    </div>
                                    <div class="promptInformation-x"></div>
                                </div>
                                <div class="cardcon">
                                    <p class="cardname">
                                        Nombre del monstruo:Dilhumar
                                    </p>
                                    <div v class="carditext">
                                        <div class="cardup">
                                            <p>Mi potenciador de ataque</p>
                                            <div class="cardupims" @click="changeBtnsss"><img
                                                    src="https://oss.chathot.me/action/halloweenDirectory/family/23.png"
                                                    alt=""></div>
                                        </div>
                                        <div class="cardx">
                                            <img src="https://oss.chathot.me/action/halloweenDirectory/family/Buff.png"
                                                alt="">
                                            <span>{{buffi()}}</span>
                                        </div>
                                    </div>
                                    <div class="cardpia">
                                        <img src="https://oss.chathot.me/action/halloweenDirectory/family/gs2.png" />
                                        <div class="cardpicmsgss">
                                            <p class="hb" v-if="listfamily===false">
                                                <img
                                                    src="https://oss.chathot.me/action/halloweenDirectory/family/hp.png">
                                                Monstruo HP:300000/3000000
                                            </p>
                                            <p class="hb" v-else-if="nowBloodc<=0">
                                                <img
                                                    src="https://oss.chathot.me/action/halloweenDirectory/family/hp.png">
                                                Monstruo HP:0/{{redTotal}}
                                            </p>
                                            <p class="hb" v-else>
                                                <img
                                                    src="https://oss.chathot.me/action/halloweenDirectory/family/hp.png">
                                                Monstruo HP:{{ greenrankTc||3000000 }}/{{redTotal}}
                                            </p>
                                            <div class="xue">

                                                <p class="mming" :style="{'width':redWidthc+ '%'}"
                                                    v-if="listfamily!==false"></p>
                                                <p class="mming" style="width:100% " v-else></p>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="cardbtns" @click='changeBtn(listfamily.family_id)'>
                                        <img
                                            src="https://oss.chathot.me/action/halloweenDirectory/family/8ab98f60565081ab9c552853f18d2d1.png">
                                        <p class="cardbtnstext" style="font-size: .24rem;">Comparte 1.5M monedas</p>

                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--    <div class="swiper-pagination"></div>-->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>

            </div>
            <!-- <div class="monster-inMiddle-a-left">
                <img src="https://oss.chathot.me/action/halloweenDirectory/family/Left_arrow1%402x.png"
                    alt="">
            </div>
            <div class="monster-inMiddle-a-right">
                <img src="https://oss.chathot.me/action/halloweenDirectory/family/Right_arrow1%402x.png"
                    alt="">
            </div> -->


            <div class="monster-footer">

            </div>
        </div>
        <div class="rewardPop-up" v-if='tabT==2'>
            <div class="rewardPop-head">
                <div class="family-text">
                    El líder de la familia que quede en el Top1 puedrá obtener 1,000 USD, y los número de recompensas
                    para los miembros de las familias que estén en el TOP3 es 20, 15 y 10 respectivamente. La lista de
                    los ususarios que recibirán las recompensas lo debe proporcionar el líder.
                </div>


            </div>
            <div class="monster-inMiddle" style="height: 14.47rem;" v-if='list'>
                <div class="monster-inMiddle-rank" v-if="listfamily!=false">


                    <div class="left">
                        <div class="monster-inMiddle-rank-num">
                            <span>{{listfamily.rank}}</span>
                            <div class="monster-inMiddle-rank-a" @click='toGuildDetail(listfamily.family_id)'>
                                <img :src="listfamily.family_avatar" alt="">
                            </div>
                        </div>

                    </div>
                    <div class="middle">
                        <div style="display: flex;    margin-bottom: .1rem;">{{listfamily.family_name}}
                        </div>
                        <div style="    margin-bottom: .1rem;"> Member:{{listfamily.member_number}}/{{tootalgodls}}
                        </div>
                        <div class="rank-i" style="    width: 1.4rem ;
                            overflow: hidden;" @click='changeOpen(listfamily.family_id)'>
                            <div v-for='item3 in listfamily.sup_list' :key='item3.user_id' class="ranki-img"> <img
                                    :src="item3.avatar" alt="" style="margin-right:.1rem;"></div>

                        </div>
                    </div>
                    <div class="right">
                        <div class="rank-r">
                            <img src="https://oss.chathot.me/action/halloweenDirectory/family/24.png" alt="">
                            <span>{{num(listfamily.value)}}</span>
                        </div>
                    </div>

                </div>
                <div class="mon-x" v-for="(item,index) in list" :key='item.family_id'>
                    <div class="monster-inMiddle-rank" style="background: #1f121a;">


                        <div class="left">
                            <div class="monster-inMiddle-rank-num">
                                <div :class="[{'rank-nums-a': index<=2},{'rank-nums-b': index>2}]">{{index+1}}</div>
                                <div class="monster-inMiddle-rank-a" @click='toGuildDetail(item.family_id)'>
                                    <img :src="item.family_avatar" alt="">
                                </div>
                            </div>

                        </div>
                        <div class="middle">
                            <div style="display: flex;margin-bottom: 5px;">{{item.family_name}}</div>
                            <div style="margin-bottom: 5px;">
                                Member:{{item.member_number}}/{{item.total_golds
                                <20000000?200:item.total_golds<50000000?400:item.total_golds<150000000?600:1000}} </div>
                                    <div class="rank-i" @click='changeOpen(item.family_id)'>
                                        <div v-for='item2 in item.sup_list' :key="item2.user_id" class="ranki-img"> <img
                                                :src="item2.avatar" alt="" style="margin-right:5px;"></div>
                                    </div>
                            </div>
                            <div class="right">
                                <div class="rank-r">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/family/24.png" alt="">
                                    <span>{{num(item.value)}}</span>
                                </div>
                            </div>

                        </div>
                        <div class="frankfoo"></div>
                    </div>

                </div>
                <div class="monster-footer">

                </div>
            </div>

            <div>
                <div class="tanc" v-if='flag' style="    height: 264%;">
                    <div class="TOp-rank" style="    position: fixed;
        left: .8rem;
       ">
                        <div class="Top-hear">
                            <div class="Top-hears">
                                TOP20 RANKING
                            </div>
                            <div class="Top-close" @click='changeClose'>

                            </div>
                        </div>
                        <div class="Top-inMiddle">
                            <div class="acc-x" v-for="(item,index) in ranklist" :key="item.user_id">
                                <div class="attackRank">
                                    <div class="left">
                                        <div class="num">
                                            <span>{{index+1}}</span>
                                            <img :src="item.avatar" alt="" @click='apply(item.user_id)'>
                                        </div>

                                    </div>
                                    <div class="middle" style="
                overflow:hidden ;
                text-overflow:ellipsis; 
                white-space:nowrap; ">
                                        {{item.nickname}}
                                    </div>
                                    <div class="right">
                                        <div class="attack-r">
                                            <img src="https://oss.chathot.me/action/halloweenDirectory/family/24.png"
                                                alt="">
                                            <span>{{num(item.value)}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="underline"></div>
                            </div>


                        </div>
                        <div class="Top-foot">

                        </div>
                    </div>
                </div>
            </div>

            <div class="tanc" v-if="Pop">
                <div class="TOp-rank" style=" bottom: 0rem ;left: 0.8rem;
                position: fixed;">
                    <div class=" Top-hear">
                        <div class="Top-hears">
                            TOP20 Clasificación
                        </div>
                        <div class="Top-close" @click='rewardClose'>

                        </div>
                    </div>
                    <div class="Top-inMiddle" style="height: 7.2rem; overflow-y: scroll;">
                        <div class=" attackRank-a " V-for='(item,index) in niname' :key='item.user_id'>
                            <div class="left">
                                <div class="num">
                                    <span>{{index+1}}</span>
                                    <img :src="item.avatar" alt="" @click="apply(item.user_id)">
                                </div>

                            </div>
                            <div class="middles" style="overflow:hidden ;
                        text-overflow:ellipsis; 
                        white-space:nowrap; ">
                                {{item.nickname}}
                                <div class="middle-a" style="height:.3rem">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/family/24.png" alt=""
                                        style="	width: 0.29rem;
                                height: 0.25rem; margin-right: .1rem">
                                    <span>{{num(item.value)}}</span>
                                </div>
                            </div>
                            <div class="right">
                                <div class="attack-r" v-if='item.prize_gold>0'>
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/family/25.png" alt=""
                                        style="	width: 0.27rem;
                                    height: 0.28rem; margin-right: .1rem">
                                    <span>{{num(item.prize_gold)}}</span>
                                </div>
                                <!-- <div class="attack-r" v-else >
                                <img   src="https://oss.chathot.me/action/halloweenDirectory/family/25.png" alt="" style="	width: 0.27rem;
                                    height: 0.28rem; margin-right: .1rem">
                                <span
                                    >{{num(item.prize_gold)}}</span>
                            </div> -->
                            </div>
                        </div>
                    </div>
                    <div class="Top-foot">

                    </div>
                </div>
            </div>
            <div class="rewardPop-open" v-show="lol">
                <div class="TOp-rank  ">
                    <div class="Top-hear " style="height: .7rem;">

                        <div class="Top-close" @click='rankChagnge'>

                        </div>
                    </div>
                    <div class="Top-inMiddle" style="    height: 7.4rem;
                 
                    overflow-y: scroll;">
                        <!-- <div class="recompensa">
                        Recompensa por vencer a los monstruos
                    </div> -->
                        <div class="recompensa-text" style="height:1.5rem">
                            Los regalos exclusivos para la familia ganadora se mostrarán aquí, y la familia puede
                            proporcionar 3 fotos para hacer un regalo dinámico con la identificación del líder de la
                            familia
                            y el nombre de la familia.
                        </div>

                        <div class="Top-lol">

                        </div>
                        <div class="Lisat">
                            <div class="recompensa ">
                                Lista de recompensas
                            </div>
                            <div class="Top-box">
                                <div class="Top-List">
                                    <span> Top1</span>
                                </div>
                                <div class="List-text">
                                    <span>Un total de 20 personas fueron premiadas, la lista la proporciona el jefe de
                                        familia.</span>
                                </div>
                                <div class="List-box">
                                    <div class="List-rewardDollars">
                                        <div class="dolar">
                                            <div class="dolar-img">
                                                <img src="https://oss.chathot.me/action/halloweenDirectory/TOP1.png?v=1"
                                                    alt="">
                                            </div>
                                            <div class="dolar-text" style="    display: flex;
                          text-align: center;
                          justify-content: center;
                          align-items: center;">
                                                Medalla
                                            </div>
                                        </div>
                                    </div>
                                    <div class="List-rewardDollars">
                                        <div class="dolar">
                                            <div class="dolar-img">
                                                <img src="https://oss.chathot.me/action/halloweenDirectory/TOP11.png?v=1"
                                                    alt="">
                                            </div>
                                            <div class="dolar-text" style="    display: flex;
                          text-align: center;
                          justify-content: center;
                          align-items: center;">

                                                Marco*15d

                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="List-box">
                                    <div class="List-rewardDollars">
                                        <div class="dolar">
                                            <div class="dolar-img">
                                                <img src="https://oss.chathot.me/action/halloweenDirectory/TOP12.png?v=1"
                                                    alt="">
                                            </div>
                                            <div class="dolar-text" style="    display: flex;
                          text-align: center;
                          justify-content: center;
                          align-items: center;">
                                                Montura*15d
                                            </div>
                                        </div>
                                    </div>
                                    <div class="List-rewardDollars">
                                        <div class="dolar">
                                            <div class="dolar-img">
                                                <img src="https://oss.chathot.me/action/halloweenDirectory/family/27b1581f0e53526721a6af561682112.png"
                                                    alt="">
                                            </div>
                                            <div class="dolar-text" style="    display: flex;
                          text-align: center;
                          justify-content: center;
                          align-items: center;">
                                                1000 USD
                                                （líder）
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="Top-box">
                                <div class="Top-List">
                                    <span> Top2</span>
                                </div>
                                <div class="List-text">
                                    <span>Un total de 15 personas fueron premiadas, la lista la proporciona el jefe de
                                        familia.</span>
                                </div>
                                <div class="List-box">
                                    <div class="List-rewardDollars">
                                        <div class="dolar">
                                            <div class="dolar-img">
                                                <img src="https://oss.chathot.me/action/halloweenDirectory/TOP2.png?v=1"
                                                    alt="">
                                            </div>
                                            <div class="dolar-text" style="    display: flex;
                          text-align: center;
                          justify-content: center;
                          align-items: center;">
                                                Medalla

                                            </div>
                                        </div>
                                    </div>
                                    <div class="List-rewardDollars">
                                        <div class="dolar">
                                            <div class="dolar-img">
                                                <img src="https://oss.chathot.me/action/halloweenDirectory/TOP22.png?v=1"
                                                    alt="">
                                            </div>
                                            <div class="dolar-text" style="    display: flex;
                          text-align: center;
                          justify-content: center;
                          align-items: center;">

                                                Marco*10d
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="List-box">
                                    <div class="List-rewardDollars">
                                        <div class="dolar">
                                            <div class="dolar-img">
                                                <img src="https://oss.chathot.me/action/halloweenDirectory/TOP23.png?v=1"
                                                    alt="">
                                            </div>
                                            <div class="dolar-text" style="    display: flex;
                          text-align: center;
                          justify-content: center;
                          align-items: center;">
                                                Montura*10d
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
                            <div class="Top-box">
                                <div class="Top-List">
                                    <span> Top3</span>
                                </div>
                                <div class="List-text">
                                    <span>Un total de 10 personas fueron premiadas, la lista la proporciona el jefe de
                                        familia.</span>
                                </div>
                                <div class="List-box">
                                    <div class="List-rewardDollars">
                                        <div class="dolar">
                                            <div class="dolar-img">
                                                <img src="https://oss.chathot.me/action/halloweenDirectory/TOP3.png?v=1"
                                                    alt="">
                                            </div>
                                            <div class="dolar-text" style="    display: flex;
                          text-align: center;
                          justify-content: center;
                          align-items: center;">
                                                Medalla

                                            </div>
                                        </div>
                                    </div>
                                    <div class="List-rewardDollars">
                                        <div class="dolar">
                                            <div class="dolar-img">
                                                <img src="https://oss.chathot.me/action/halloweenDirectory/TOP33.png?v=1"
                                                    alt="">
                                            </div>
                                            <div class="dolar-text" style="    display: flex;
                          text-align: center;
                          justify-content: center;
                          align-items: center;">

                                                Marco*7d
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="List-box">
                                    <div class="List-rewardDollars">
                                        <div class="dolar">
                                            <div class="dolar-img">
                                                <img src="https://oss.chathot.me/action/halloweenDirectory/family/TOP34.png?v=1"
                                                    alt="">
                                            </div>
                                            <div class="dolar-text" style="    display: flex;
                          text-align: center;
                          justify-content: center;
                          align-items: center;">
                                                Montura*7d
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>





                        </div>

                    </div>
                    <div class="Top-foot">

                    </div>
                </div>
            </div>

        </div>
        <script>
            var certifySwiper = '';
            new Vue({
                el: '#app',
                data() {
                    return {
                        imID: '3709070',
                        sai: 0,
                        sum: 0,
                        valuetotal: [],
                        token: GetUrlParam('token'),
                        active_id: environment() ? 528 : 415,
                        user_id: GetUrlParam('user_id'),
                        lol: false,
                        tabT: 1,
                        flag: false,
                        Pop: false,
                        rankNum: 0,
                        greenTotal: 500000, //第一只怪兽
                        blueTotal: 1000000, //第2只怪兽
                        redTotal: 3000000, //第一只怪兽
                        list: [],
                        countdown_d: "00",
                        countdown_h: "00",
                        countdown_m: "00",
                        countdown_s: "00",
                        promptInformationa: false,
                        listfamily: {},
                        promptInformationas: false,
                        promptInformationass: false,
                        ranklist: [],
                        swiperIndex: 0,
                        nowBlood: 0,
                        nowBloods: 0,
                        greengold: 100000,
                        bluegold: 300000,
                        redgold: 1500000,
                        swiperIndexs: 0,
                        nowBloodb: 0,
                        nowBloodc: 0,
                        nowBloodsb: 0,
                        nowBloodsc: 0,
                        Pops: false,
                        time1: '0',
                        time2: '00',
                        time3: '00',
                        time6: '00',
                        a: '200',
                        timer: null,
                        buffl: 0,
                        niname: [],
                        kkkk: '56',
                        totaNum: 0,
                    }
                },
                computed: {
                    rankMount() {
                        return ((this.greenTotal - this.listfamily.value) / this.greenTotal) * 100 <= 0 ? 0 : ((this
                            .greenTotal - this.listfamily.value) / this.greenTotal) * 100
                    },

                    rankBlue() {

                        return ((this.blueTotal - this.rankNum) / this.blueTotal) * 100
                    },
                    rankRed() {
                        return ((this.redTotal - this.rankNum) / this.redTotal) * 100
                    },
                    ranksm() {
                        return this.greenTotal - this.rankNum <= 0 ? '0' : this.greenTotal - this.rankNum
                    },
                    buffRank() {
                        return this.listfamily.member_number < 50 ?
                            0.5 : this.listfamily.member_number > 50 || this.listfamily.member_number <= 100 ? 1 :
                                this.listfamily.member_number > 100 ? 2 : 0
                    },


                    greenWidth() {
                        return (this.nowBlood / this.greenTotal) * 100 <= 0 ? 0 : (this.nowBlood / this
                            .greenTotal) * 100
                    },
                    blueWidthb() {
                        return (this.nowBloodb / this.blueTotal) * 100 <= 0 ? 0 : (this.nowBloodb / this
                            .blueTotal) * 100
                    },
                    redWidthc() {
                        return (this.nowBloodc / this.redTotal) * 100 <= 0 ? 0 : (this.nowBloodc / this.redTotal) *
                            100
                    },

                    da() {
                        return this.nowBlood <= 0 ? 1 : this.nowBloodb <= 0 && this.nowBlood <= 0 ? 2 : 0
                    },
                    greenrankT() {
                        return this.nowBlood <= 0 ? 0 : this.nowBlood
                    },
                    greenrankTb() {
                        return this.nowBloodb <= 0 ? 0 : this.nowBloodb
                    },
                    greenrankTc() {
                        return this.nowBloodc <= 0 ? 0 : this.nowBloodc
                    },
                    greenWidths() {
                        return (this.nowBloods / this.greenTotal) * 100 <= 0 ? 0 : (this.nowBloods / this
                            .greenTotal) * 100
                    },
                    blueWidthsb() {
                        return (this.nowBloodsb / this.blueTotal) * 100 <= 0 ? 0 : (this.nowBloodsb / this
                            .blueTotal) * 100
                    },
                    redWidthsc() {
                        return (this.nowBloodsc / this.redTotal) * 100 <= 0 ? 0 : (this.nowBloodsc / this
                            .redTotal) *
                            100
                    },
                    tootalgodls() {
                        return this.listfamily.total_golds < 20000000 ? 200 : this.listfamily.total_golds <
                            50000000 ? 400 : this.listfamily.total_golds < 150000000 ? 600 : 1000
                    },
                    totalg() {
                        // return this.list.map(item => item.total_golds)
                    },
                    goldnuum() {
                        console.log('szw', this.swiperIndex);
                        return this.swiperIndex == 0 ?
                            (+this.listfamily.value / this.greenTotal) * (this.greengold * 0.7) :
                            this.swiperIndex == 1 ?
                                (+this.listfamily.value / this.blueTotal) * (this.bluegold * 0.7) : this.swiperIndex ==
                                    2 ? (+this.listfamily.value / this.redTotal) * (this.redgold * 0.7) : 0
                    },
                    goldnuums() {
                        console.log('1231231', this.swiperIndexs);
                        return this.swiperIndexs == 0 ?
                            (+this.listfamily.value / this.greenTotal) * (this.greengold * 0.7) :
                            this.swiperIndexs == 1 ?
                                (+this.listfamily.value / this.blueTotal) * (this.bluegold * 0.7) : this.swiperIndexs ==
                                    2 ? (+this.listfamily.value / this.redTotal) * (this.redgold * 0.7) : 0
                    },
                },
                watch: {
                    sai(n) {
                        console.log(n);
                    },
                    swiperIndexs(n) {
                        console.log('popsINDex', n);
                    },
                    // nowBlood(n) {
                    //     console.log('1', n);
                    //     if (n <= 0) {


                    //         certifySwiper.slideTo(1)

                    //     }
                    // },
                    // nowBloodb(n) {
                    //     console.log('2', n);
                    //     if (n <= 0) {
                    //         certifySwiper.slideTo(2)
                    //     }
                    // },
                    // nowBloodc(n) {
                    //     console.log('3', n);


                    // },

                },
                mounted() {

                    // this.myfamily() 
                    // this.handleRanksm()
                    this.setUv()
                    this.$nextTick(() => {
                        var that = this;
                        certifySwiper = new Swiper('#certify .swiper-container', {
                            initialSlide: 0 || this.dod(),
                            watchSlidesProgress: true,
                            slidesPerView: 'auto',
                            observer: true,
                            observeParents: true,
                            centeredSlides: true,
                            // touchRatio: 0,
                            updateTranslate: true,
                            // preventInteractionOnTransition:true,
                            // loop: true,
                            loopedSlides: 3,
                            // initialSlide:this.totaNum,
                            // autoplay: true,
                            navigation: {
                                nextEl: '#certify .swiper-button-next',
                                prevEl: '#certify .swiper-button-prev',
                                changeBtn: '#certify .cardbtns'

                            },

                            on: {
                                progress: function (progress) {
                                    for (i = 0; i < this.slides.length; i++) {
                                        var slide = this.slides.eq(i);
                                        var slideProgress = this.slides[i].progress;
                                        modify = 1;
                                        if (Math.abs(slideProgress) > 0) {
                                            modify = (Math.abs(slideProgress) - 1.1) * 0.89 + 1;
                                        }
                                        translate = slideProgress * modify * 5 + 'rem';
                                        scale = 1 - Math.abs(slideProgress) / 9;
                                        zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                                        slide.transform('translateX(' + translate + ') scale(' +
                                            scale + ')');
                                        slide.css('zIndex', zIndex);
                                        slide.css('opacity', 1);
                                        // if (Math.abs(slideProgress) > 2) {
                                        //     slide.css('opacity', 0);
                                        // }
                                    }
                                },
                                setTransition: function (transition) {
                                    for (var i = 0; i < this.slides.length; i++) {
                                        var slide = this.slides.eq(i)
                                        slide.transition(transition);
                                    }


                                },
                                // slideChange: function () {
                                //     console.log('执行11111111', certifySwiper.realIndex)
                                //     that.swiperIndex = certifySwiper.realIndex;
                                //     that.family()
                                //     that.handleRanksm();
                                // },
                                slideChangeTransitionEnd: function () {
                                    console.log('执行11111111', certifySwiper.realIndex)
                                    that.swiperIndex = certifySwiper.realIndex;
                                    // that.family()                     
                                    that.handleRanksm();
                                    // this.dod()
                                },
                            }

                        })
                        console.log('lunbotu on zhixing')
                        this.family()
                        this.dod()
                        var el = document.querySelector('.head-svga');
                        var parser = new SVGA.Parser(el);
                        parser.load('https://oss.chathot.me/action/halloweenDirectory/family/toutu.svga', (
                            videoItem) => {
                            const player = new SVGA.Player(el);
                            player.setVideoItem(videoItem);
                            player.startAnimation();
                        })
                    });
                },
                methods: {
                    setUv: function () {

                    
                        const query = {
                            'Api_name': 'activity_data',
                            'Api_data': JSON.stringify({
                                op: "activity_uv",
                            user_id: GetUrlParam('user_id'),
                            token: GetUrlParam('token'),
                            active_id: this.active_id,
                            }),
                        };
                        return ajax2('POST', query, {}).then(res => {
                            console.log('uv 的信息返回：', res)
                            if (res.status == 200) {

                            }
                        })
                
                    },
                    toGuildDetail: function (id) {
                        toGuildDetail(id)
                    },
                    buffi() {
                        let sum = 0
                        if (+this.listfamily.member_number < 50) {
                            sum = 0.5
                        }
                        if (+this.listfamily.member_number >= 50 || +this.listfamily.member_number == 100) {
                            sum = 1
                        }
                        if (+this.listfamily.member_number >= 100) {
                            sum = 2
                        }
                        return sum
                    },
                    //跳转用户页面 
                    contactStarSecretary: function () {
                        contactStarSecretary(this.imID)
                    },
                    //跳转个人房间
                    apply: function (id) {
                        console.log('111', id);
                        userDetails(id)
                    },
                    handleRanksm() {
                        const swiperIndex = certifySwiper.realIndex;

                        if (!this.listfamily) return 0;
                        if (swiperIndex == 0) {

                            this.nowBlood = this.greenTotal - this.listfamily.value <= 0 ? 0 :
                                this.greenTotal - this.listfamily.value
                            localStorage.setItem('a', this.nowBlood)

                            this.myfamily()
                        } else if (swiperIndex == 1) {
                            this.nowBloodb = this.blueTotal - this.listfamily.value <= 0 ? 0 : this.greenTotal -
                                this.listfamily.value > 0 ? this.blueTotal :
                                this.blueTotal - this.listfamily.value
                            localStorage.setItem('b', this.nowBloodb)
                            console.log(this.nowBloodb, ' this.nowBloodc');
                            this.myfamily()
                        } else if (swiperIndex == 2) {
                            this.nowBloodc = this.redTotal - this.listfamily.value <= 0 ? 0 : this.blueTotal - this
                                .listfamily.value > 0 ? this.redTotal :
                                this.redTotal - this.listfamily.value
                            localStorage.setItem('c', this.nowBloodc)
                            console.log(this.nowBloodc, ' this.nowBloodb');
                            this.myfamily()
                        }

                    },

                    leftTimer2: function (starttime, endtime) {
                        var endtime = endtime;
                        var self = this;
                        clearInterval(this.timer);
                        this.timer = setInterval(function () {
                            // var starttime = starttime;
                            var leftTime = endtime - starttime;
                            if (leftTime > 0) {
                                //计算剩余的毫秒数
                                var days = parseInt(leftTime / 60 / 60 / 24, 10); //计算剩余的天数
                                var hours = parseInt(leftTime / 60 / 60 % 24, 10); //计算剩余的小时
                                var minutes = parseInt(leftTime / 60 % 60, 10); //计算剩余的分钟
                                var seconds = parseInt(leftTime % 60, 10); //计算剩余的秒数
                                // days = checkTime(days);
                                hours = self.checkTime(hours);
                                minutes = self.checkTime(minutes);
                                seconds = self.checkTime(seconds);
                                // document.getElementById("timer").innerHTML = days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";
                                // vue.time = days + vue.data.day + hours + ":" + minutes + ":" + seconds;
                                self.time1 = days;
                                self.time2 = hours
                                self.time3 = minutes
                                self.time6 = seconds
                                endtime -= 1;
                            } else {
                                self.time1 = '00'
                                self.time2 = '00'
                                self.time3 = '00'
                                self.time6 = '00'
                            }
                        }, 1000);
                    },
                    checkTime: function (i) { //将0-9的数字前面加上0，例1变为01
                        if (i < 10) {
                            i = "0" + i;
                        }
                        return i;
                    },
                    num(number) {
                        var num = '';
                        if (number < 1000) {
                            num = number;
                        } else if (number >= 1000 && number < 1000000) {
                            var txt = (number / 1000).toFixed(3);
                            num = this.formatDecimal(txt, 1) + 'K';
                        } else if (number >= 1000000) {
                            var txt = (number / 1000000).toFixed(3);
                            num = this.formatDecimal(txt, 1) + 'M';
                        }
                        return num;
                    },

                    formatDecimal(num, decimal) {
                        // console.log(num)
                        num = num.toString();
                        var index = num.indexOf('.');
                        if (index !== -1) {
                            num = num.substring(0, decimal + index + 1);
                        } else {
                            num = num.substring(0);
                        }
                        return parseFloat(num).toFixed(decimal);
                    },
                    promptInformation() {
                        this.promptInformationa = !this.promptInformationa
                    },
                    closePops() {
                        this.Pops = false
                        certifySwiper2.update()
                        certifySwiper2.slideNext()


                    },
                    changeBtn(id) {
                        // this.family()

                        console.log(id);
                        this.Pop = true
                        document.body.style.overflowY = "hidden"
                        const query = {
                            'Api_name': 'activity_family',
                            'Api_data': JSON.stringify({
                                'user_id': this.user_id,
                                'token': this.token,
                                'active_id': this.active_id, //活动id
                                'op': 'get_family_hegemony_rank',
                                "family_id": id
                            }),
                        };
                        return ajax2('POST', query, {}).then(res => {
                            this.niname = res.data
                            console.log('666', this.niname);
                            //  console.log(this.niname);
                            let sua;
                            this.listfamily.sup_list.map(item => {
                                sua = item.prize_gold
                                console.log(sua);
                            })

                            //      this.niname.forEach((item)=>{
                            //        item.prize_gold=sua
                            //      })
                            // console.log( this.niname,'````');


                        })
                    },
                    BtnRAnks() {
                        this.Pops = true
                        document.body.style.overflowY = "hidden"
                    },
                    changeBtns() {
                        this.promptInformationas = !this.promptInformationas
                    },
                    changeBtnsss() {
                        this.promptInformationass = !this.promptInformationass
                    },
                    changeTab(num) {
                        this.tabT = num

                    },
                    changeOpen(id) {
                        this.flag = true
                        document.body.style.overflowY = "hidden"
                        console.log(id);
                        this.ranklist = [];
                        const query = {
                            'Api_name': 'activity_family',
                            'Api_data': JSON.stringify({
                                'user_id': this.user_id,
                                'token': this.token,
                                'active_id': this.active_id, //活动id
                                'op': 'get_family_hegemony_rank',
                                "family_id": id
                            }),
                        };
                        return ajax2('POST', query, {}).then(res => {
                            this.ranklist = res.data
                            console.log(123, this.ranklist);
                            // let articleBlood = this.ranklist.map(item => item.value)
                            // let sum = 0
                            // articleBlood.forEach(item => {
                            //     sum += +item
                            // })
                            // this.rankNum = sum

                        })
                        document.body.style.overflowY = "hidden"
                    },
                    changeClose() {
                        this.flag = false
                        document.body.style.overflowY = "auto"
                    },
                    reward() {
                        this.lol = true
                        // document.body.style.overflowY = "hidden"
                    },
                    //关闭tabT==1的Top5
                    rewardClose() {
                        this.Pop = false
                        // certifySwiper.update()
                        // certifySwiper.slideNext()
                        // this.family()
                        document.body.style.overflowY = "auto"
                    },
                    rankChagnge() {
                        this.lol = false
                    },
                    family() {
                        const query = {
                            'Api_name': 'activity_family',
                            'Api_data': JSON.stringify({
                                'user_id': this.user_id,
                                'token': this.token,
                                'active_id': this.active_id, //活动id
                                'op': 'get_family_hegemony'
                            }),
                        };
                        // console.log(ajax)
                        return ajax2('POST', query, {}).then(res => {
                            console.log('2323232', res);
                            this.list = res.data.list
                            this.listfamily = res.data.my_family
                            this.dod()
                            console.log(this.listfamily, '````');
                            // console.log('11111',this.listfamily);
                            let sum = 0
                            // this.listfamily.sup_list.forEach((item) => {
                            //     sum += +item.value
                            // })

                            // if (this.swiperIndex == 0) {
                            //     this.listfamily.sup_list.forEach((item) => {
                            //         item.sai = (item.value / sum) * (this.greengold * .7)
                            //     })

                            // } else if (this.swiperIndex == 1) {
                            //     this.listfamily.sup_list.forEach((item) => {
                            //         item.sai = (item.value / sum) * (this.bluegold * .7)
                            //     })
                            // } else if (this.swiperIndex == 2) {
                            //     this.listfamily.sup_list.forEach((item) => {
                            //         item.sai = (item.value / sum) * (this.redgold * .7)
                            //     })
                            // }
                            this.myfamily()

                            // console.log('111'this.listfamily);
                            // this.sai = this.listfamily.sup_list.map(item => (item.value / this.sum) *
                            //     100000)
                            console.log('`````---------', this.listfamily.sup_list);
                            console.log('````', this.num(this.sai));
                            this.handleRanksm();
                            res.data.active_info = res.data.active_info || {};
                            console.log(res.data.active_info)
                            this.leftTimer2(res.data.active_info.now_time, res.data.active_info.end_time)

                        }).then(res => {
                            //    console.log(this.nowBlood,'this.nowBlood');
                            //      console.log(this.nowBloodb,'this.nowBloodb');
                            //      console.log(this.nowBloodc,'this.nowBloodc');
                            //  debugger;
                            if (this.nowBlood <= 0 && this.nowBloodb <= 0) {
                                certifySwiper.slideTo(2)
                            } else if (this.nowBlood <= 0) {

                                certifySwiper.slideTo(1)
                            } else {
                                console.log(3);
                                certifySwiper.slideTo(0)
                            }
                        })
                    },
                    myfamily() {
                        this.promptInformationa = false
                        this.promptInformationas = false
                        this.promptInformationass = false

                    },

                    dod() {
                        // debugger;

                        let sum = 0;
                        let a = localStorage.getItem('a')
                        let b = localStorage.getItem('b')
                        let c = localStorage.getItem('c')
                        console.log(a, '```2132');
                        console.log(b, '```2132');
                        console.log(c, '```2132');
                        //  console.log(this.listfamily);
                        //  console.log(this.nowBlood,'this.nowBlood');
                        //  console.log(this.nowBloodb,'this.nowBloodb');
                        //  console.log(this.nowBloodc,'this.nowBloodc');
                        if (a <= 0 && b <= 0) {
                            sum = 2
                        } else if (a <= 0) {
                            sum = 1
                        } else {
                            sum = 0
                        }
                        return sum
                    }
                }
            })
        </script>
</body>

</html>